<template>
  <div id="app">
    <h3>欢迎光临vue开发的收银系统——水果店</h3>
    <table id="tb">
      <tr>苹果10 ￥ / 斤，折扣 //8折</tr>
      <tr>请输入你要购买的斤数
        <input type="number" v-model.number="buy">
      </tr>
      <tr><button @click="order">结账买单</button></tr>
      <tr>结账单:总价：{{total}}￥元 折后价： {{zhe}}￥元 省了：{{save}}￥元</tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      buy:0,
      total:0,
      zhe:0,
      save:0
    }
  },
  methods: {
    order(buy){
      this.total =  10 * this.buy
      this.zhe = 10 * this.buy * 0.8
      this.save = 10 * this.buy * 0.2
    }
  }
}
</script>

<style>
 #app {
  width: 600px;
  margin: 10px auto;
  
}
  h3{
    transform: translate(120px)
  }
#tb {
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  width: 100%;
}
tr{
   border: 1px solid black;
   line-height: 30px;
}
</style>
